<template>
  <div class="WorkorderForm-main">
    <el-table
      :header-cell-style="{background:'#f3f6fb'}"
      class="customer-table"
      :data="list"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column
        prop="date"
        label="序号"
        width="80"
      >
        <template slot-scope="{$index}">
          <span>
            {{ (count.pageSize *(count.pageIndex-1)+$index +1) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="taskCode"
        label="工单编号"
      />
      <el-table-column
        prop="innerCode"
        label="设置编号"
      />
      <el-table-column
        prop="desc"
        label="工单类型"
      />
      <el-table-column
        prop="desc"
        label="工单方式"
      />
      <el-table-column
        prop="taskStatus"
        label="工单状态"
      >
        <template slot-scope="{row}">
          <span v-if="row.taskStatus==1">待办</span>
          <span v-if="row.taskStatus==2">进行</span>
          <span v-if="row.taskStatus==3">取消</span>
          <span v-if="row.taskStatus==4">完成</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="运维人员"
      />
      <el-table-column
        prop="createTime"
        label="创建日期"
      />
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="medium" @click="handleClick(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pagination">
      <div class="text">
        <span>共{{ page.totalCount }}条数据</span>
        <span>第{{ count.pageIndex }}/{{ page.totalPage }}页</span>
      </div>
      <div class="btn">
        <el-button :disabled="count.pageIndex==1" @click="btnPre">上一页</el-button>
        <el-button @click="btnNaxt">下一页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { goodsDetailApi } from '../../../api/operate'
export default {
  name: 'WorkorderForm',
  props: {
    dialogDetail: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    count: {
      type: Object,
      default: () => ({})
    },
    page: {
      type: Object,
      default: () => ({})
    },
    detailObj: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    async  handleClick(row) {
      this.$emit('update:dialogDetail', true)
      await this.goodsDetail(row.taskId)
      this.$store.commit('user/getOperateRow', row)
    },
    // 下一页
    btnNaxt() {
      if (this.count.pageIndex < this.page.totalPage) {
        this.count.pageIndex++
        // console.log(this.count.pageIndex, this.page.totalPage)
        this.$emit('goodsManageApiList')
      }
    },
    // 上一页
    btnPre() {
      this.count.pageIndex--
      this.$emit('goodsManageApiList')
    },
    // 详情数据
    async goodsDetail(id) {
      const res = await goodsDetailApi(id)
      console.log(res, 666666)
      this.detailObj.name = res.data
    }
  }
}
</script>
<style lang='scss'  >
 .WorkorderForm-main{
  width: 100%;
  .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
  }
  .btn{
    button{
      width: 70px;
      height: 32px;
      padding: 0;
      // border: 1px solid transparent;
      font-size: 13px;
      color: #666560;
      background-color: #dbdbdb;
      &:nth-child(1){
        margin-right: 20px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.Pagination{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  .text{
    color: #dbdfe5;
    span:nth-child(1){
      padding-right: 7px;
    }
  }
}
</style>
